<template>
  <div class="mod-index-img">
    <el-dialog
      title="用户详情"
      :close-on-click-modal="false"
      :visible.sync="visible"
    >
      <el-form  label-width="80px" :model="dataValue">
        <el-form-item  :label="$t('chatMsg.userId')">
          <el-input  :disabled="true" v-model="dataValue.id"></el-input>
        </el-form-item>
        <el-form-item  :label="$t('chatMsg.userImg')">
          <template slot-scope="scope">
            <img style="width:100px;height: 100px;" :src="resourcesUrl+dataValue.userPortrait"  alt="">
          </template>
        </el-form-item>
        <el-form-item  :label="$t('chatMsg.userName')">
          <el-input  :disabled="true" v-model="dataValue.userName"></el-input>
        </el-form-item>
        <el-form-item :label="$t('chatMsg.createTime')">
          <el-input  :disabled="true" v-model="dataValue.createDate"></el-input>
        </el-form-item>
        <el-form-item :label="$t('chatMsg.onlineStatus')">
         <template slot-scope="scope">
            <div class="table-cell-text">{{dataValue.onlineStatus?$t('chatMsg.overonlineStatus'):$t('chatMsg.noonlineStatus') }}</div>
          </template>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <div class="default-btn" @click="visible = false">{{$t("remindPop.cancel")}}</div>
        <div class="default-btn primary-btn" @click="visible = false">{{$t("remindPop.confirm")}}</div>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import ImgUpload from '@/components/img-upload'
export default {
  data () {
    return {
      resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
      visible: false,
      dataValue: {} // 用户详情
    }
  },
  components: {
    ImgUpload
  },
  methods: {
    // 获取用户详情
    getUserDetail (id) {
      this.$http({
        url: this.$http.adornUrl('/admin/melt/user/getUserInfo'),
        method: 'get',
        params: {userId: id}
      }).then((data) => {
        console.log('用户详情', data)
        this.dataValue = data.data
      })
    }

  }
}
</script>
<style lang="scss" scoped>
.mod-index-img {
  .index-image-prod-card {
    position: relative;
    .card-prod-status-tips {
      position: absolute;
      right: 0;
      bottom: 54px;
      color: #fff;
      font-size: 12px;
      line-height: 16px;
      background-color:rgba(0, 0, 0, .3);
      padding: 3px 6px;
      border-top-left-radius: 4px;
    }
  }
}
.whether{
  padding-top: 10px;
  width: 100%;
  display: flex;
  justify-content:flex-end;
  border-top: 1px solid #eeeeee;
}
.el-input.is-disabled .el-input__inner{
  color:#000 !important,
}
</style>
